<template>
	<div id="campus_manage" class="container">
		<div class="content">
			<!-- <div class="title">校区管理</div> -->
			<div class="panel">
				<div class="condition">
					<div class="row_one">
						<span class="condition_name">合作类型</span>
						<el-select v-model="tabledisplayObj.cooperationMode" clearable placeholder="选择合作类型" style="width: 1.8rem;">
							<el-option v-for="item in cooperationModeList" :key="item.name" :label="item.name" :value="item.value"></el-option>
						</el-select>
						<el-select v-if="roleMode == 0" v-model="tabledisplayObj.orgId" @change="changeOrg" style="width:1.8rem;" clearable placeholder="所有机构">
							<el-option v-for="(row,index) in selectOrgList" :key="index" :label="row.orgName" :value="row.orgId"></el-option>
						</el-select>
						<el-input clearable style="width: 3.5rem;" placeholder="搜索 校区名、校长、手机号" v-model="tabledisplayObj.generalTerm" class="input_search"></el-input>
						<div v-if="hasApi('campusListPage')" @click="searchCampus()" class="search_btn" style="margin-left:0.1rem;">搜索</div>

						<div class="center_btn" v-if="!isShowBtn && hasApi('campusImport')" @click="openImport()">导&nbsp;入</div>
						<div class="left_btn" v-if="!isShowBtn &&  hasApi('campusAdd')" @click="openAdd">新&nbsp;增</div>
					</div>

				</div>
				<div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 1rem;">编号</td>
								<td style="width: 3rem;">校区名称</td>
								<td v-if="roleMode == 0" style="width: 3rem;">所属机构</td>
								<td style="width: 3rem;">校区电话</td>
								<td style="width: 4rem;">校区地址</td>
								<td style="width: 2rem;">校长</td>
								<td style="width: 2rem;">手机号</td>
								<td style="width: 1.5rem;">合作类型</td>
								<td style="width: 5rem;">合作期间</td>
								<td style="width: 1rem;">状态</td>
								<td style="width: 2rem;">创建人</td>
								<td style="width: 3.2rem;">操作</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item,index in campusList">
								<td>{{index+1}}</td>
								<td>{{item.name}}</td>
								<td v-if="roleMode == 0">{{item.orgName}}</td>
								<td>{{item.tel}}</td>
								<td>{{item.address}}</td>
								<td>{{item.contactsName}}</td>
								<td>{{item.contactsTel}}</td>
								<td>{{item.cooperateModeName}}</td>
								<td v-if="item.isNoTime">无限期</td>
								<td v-else>{{item.serveStartTimeShow}}至{{item.serveEndTimeShow}}</td>
								<td>{{item.isUse == '1'?"正常":"禁用"}}</td>
								<td>{{item.createUserName}}</td>

								<td>
									<span v-if="hasApi('campusInfo')" class="operate_btn" style="color:#67C23A;" @click="handleLook(index,item)">查看</span> &nbsp;
									
									<el-popover placement="bottom-end" trigger="click" v-model="item.operate">
									    <div>
									    	<div class="operate" v-if="hasApi('campusUpdate') && item.isUse == '1'" @click="handleEdit(index,item)">编辑</div>
									    	
									    	<div class="operate" v-if="!isShowBtn && hasApi('campusToogleStatus')" @click="handleDelete(index,item)">
									    		{{item.isUse == '1'?"禁用":"启用"}}
									    	</div>
									    	<!---->
									    	<div class="operate" v-if="item.eduToHomeLink" @click="handleExtension(index,item)">家校通链接</div>
									    	
									    </div>
									    <span class="operate_btn" slot="reference">操作</span>
									  </el-popover>
									
									<!--<span v-if="hasApi('campusUpdate')" class="operate_btn" @click="handleEdit(index,item)">编辑</span> &nbsp;
									<span v-if="!isShowBtn && hasApi('campusToogleStatus')" class="operate_btn" @click="handleDelete(index,item)">{{item.isUse == '1'?"禁用":"启用"}}</span>-->
									<!--<span v-if="item.eduToHomeLink != null" class="operate_btn" @click="handleExtension(index,item)">家校通链接</span>-->
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<el-pagination class="page" layout="total, sizes, prev, pager, next, jumper" :current-page="tabledisplayObj.currPage" @size-change="pageSizeChange" @current-change="tabledisplayChangePage" :total="tabledisplayObj.total"></el-pagination>
			</div>
		</div>

		<campusImport ref="campusImport" @callback="closeImport"></campusImport>
		<crateCampus ref="crateCampus" @callback="closeAdd"></crateCampus>
		<schoolExtension ref="schoolExtension" @callback="closeExtension"></schoolExtension>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
	import crateCampus from "./common/crateCampus";
	import campusImport from "./common/campus_import";
	import schoolExtension from "./common/school_extension";
	let vm;
	let user;
	export default {
		data() {
			return {
				tabledisplayObj: {
					currPage: 1,
					pageSize: 10,
					total: 0,
					cooperationMode: "",
					generalTerm: "",
					orgId: '',
				},
				isShowBtn: false,
				campusList: [],
				cooperationModeList: [],

				roleMode: 0,
				selectOrgList: []
			};
		},
		components: {
			crateCampus,
			schoolExtension,
			campusImport
		},
		methods: {
			/**
			 * 初始化数据
			 */
			initData() {
				this.getData(vm.tabledisplayObj);

			},
			/**
			 * 抽取出来获取课程类别列表
			 */
			getData(paras) {
				console.log(user);
				if(user.roleMode == 2) {
					paras.campusId = vm.$store.state.campusId;
				}
				let campustemp = []; //临时存放列表
				api.campusListPage(paras).then(function(data) {
					if(data.result == "操作成功") {
						campustemp = data.list;
						for(let i = 0; i < campustemp.length; i++) {
							campustemp[i].serveStartTimeShow = campustemp[i].serveStartTime ?
								campustemp[i].serveStartTime.split(" ")[0] :
								"";
							campustemp[i].isNoTime = campustemp[i].cooperationMode == 2;
							campustemp[i].serveEndTimeShow = campustemp[i].serveEndTime ?
								campustemp[i].serveEndTime.split(" ")[0] :
								"";
							for(let y = 0; y < vm.cooperationModeList.length; y++) {
								if(
									vm.cooperationModeList[y].value == campustemp[i].cooperationMode
								) {
									campustemp[i].cooperateModeName =
										vm.cooperationModeList[y].name;
								}
							}
							
							campustemp[i].operate = false;
						}
						vm.tabledisplayObj.total = data.totalCount;
						vm.campusList = campustemp;
					}
				});
			},
			handleExtension(index, item) {
				item.operate = false;
				vm.$refs.schoolExtension.init({
					eduToHomeLink: item.eduToHomeLink
				});
			},
			openAdd() {
				vm.$refs.crateCampus.init({});
			},
			campusChange: function(campusId) {
				this.getData(vm.tabledisplayObj);
			},
			closeExtension(data) {

			},
			closeAdd(data) {
				console.log(data);
				if(data == "添加成功") {
					vm.$emit("campusUpdate");
				}
				this.initData();
			},
			pageSizeChange: function(val) {
				//页条数发生改变
				vm.tabledisplayObj.pageSize = val;
				this.getData(vm.tabledisplayObj);
			},
			/**表格显示形式翻页 */
			tabledisplayChangePage(val) {
				console.log(val);
				vm.tabledisplayObj.currPage = val;
				this.getData(vm.tabledisplayObj);
			},
			/**
			 * 点击查看
			 */
			handleLook(index, row) {
				console.log(index, row);
				let data = tool.clone(row);
				data.isShow = true;
				vm.$refs.crateCampus.init(data);
			},
			/**
			 * 点击编辑
			 */
			handleEdit(index, row) {
				row.operate = false;
				vm.$refs.crateCampus.init(tool.clone(row));
			},
			/**
			 * 点击删除
			 */
			handleDelete(index, row) {
				row.operate = false;
				if(row.isUse == "1") {
					this.$confirm("此操作将禁用该校区, 是否继续?", "温馨提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
							center: true
						})
						.then(() => {
							var paras = {
								campusId: row.campusId,
								isUse: "0"
							};
							api.campusToogleStatus(paras).then(function(data) {
								console.log(data);
								if(data.result == "操作成功") {
									vm.$message({
										message: "禁用成功",
										type: "success"
									});
									vm.$emit("campusUpdate");
									vm.initData();
								} else {
									this.$message.error(data.result);
								}
							});
						})
						.catch(() => {});
				} else {
					this.$confirm("此操作将启用该校区, 是否继续?", "温馨提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
							center: true
						})
						.then(() => {
							var paras = {
								campusId: row.campusId,
								isUse: "1"
							};
							api.campusToogleStatus(paras).then(function(data) {
								console.log(data);
								if(data.result == "操作成功") {
									vm.$message({
										message: "启用成功",
										type: "success"
									});
									vm.$emit("campusUpdate");
									vm.initData();
								} else {
									this.$message.error(data.result);
								}
							});
						})
						.catch(() => {});
				}
			},
			/**
			 * 搜索
			 */
			searchCampus() {
				vm.tabledisplayObj.currPage = 1;
				vm.initData();
			},
			openImport: function() {
				vm.$refs.campusImport.init();
			},
			closeImport: function() {
				vm.searchCampus();
			},
			getOrgList() {
				api.orgList().then(function(data) {
					if(data.resultCode == 2000) {
						vm.selectOrgList = data.list;
					}
				});
			},
			changeOrg(val) {

			}
		},
		mounted() {
			vm = this;
			user = tool.getItem(lsKey.user, true); //得到当前用户信息
			//获取数据字典
			let dicdata = tool.getItem(lsKey.dict, true);
			vm.cooperationModeList = dicdata["cooperation_mode"];
			console.log(user.roleMode);
			console.log(vm.cooperationModeList);
			this.roleMode = user.roleMode;
			if(user.roleMode == 2) {
				vm.isShowBtn = true;
			}
			this.initData();
			if(user.roleMode == 0)
				this.getOrgList();
		},
		computed: {}
	};
</script>

<style lang="scss">
	#campus_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		.input_search {
			.el-input__inner {
				background-color: rgb(247, 248, 250);
			}
		}
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
	.left_btn,
	.center_btn {
		/*background-image: url(../../assets/img/clue_manage/add_white.png);*/
		width: 1.54rem;
	}
</style>